<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input placeholder="请输入角色名称" v-model="queryParam.name" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="handleSearch(true)" icon="search">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        row-key="id"
        size="default"
        :columns="columns"
        :data="loadData"
        ref="table"
        showPagination="auto"
        :pagination="{ 'show-total': total => `共 ${total} 条` }"
      >
        <div slot="menu" slot-scope="text">
          <a-tag v-for="(item, index) in text" :key="index">{{ item.first_name }}</a-tag>
        </div>
        <div slot="expandedRowRender" slot-scope="record" style="margin: 0">
          <a-row :gutter="24" :style="{ marginBottom: '12px' }">
            <a-col :span="12" v-for="role in record.menu" :key="role.menu_id" :style="{ marginBottom: '12px' }">
              <h3 style="font-weight:bold">{{ role.first_name }}</h3>
              <a-row
                v-for="secondMenu in role.second"
                :key="secondMenu.second_menu_id"
                :style="{ marginBottom: '12px' }"
              >
                <a-col :lg="4" :md="24">
                  <span>{{ secondMenu.second_name }}</span>
                </a-col>
                <a-col :lg="20" :md="24" v-if="secondMenu.third && secondMenu.third.length > 0">
                  <a-tag
                    color="cyan"
                    v-for="(action, actionIndex) in secondMenu.third"
                    :key="actionIndex"
                    :style="{ marginBottom: '12px' }"
                  >{{ action.third_name }}</a-tag
                  >
                </a-col>
                <a-col :span="20" v-else>-</a-col>
              </a-row>
            </a-col>
          </a-row>
        </div>
        <span slot="createTime" slot-scope="text">{{ text | moment }}</span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">分配</a>
        </span>
      </s-table>

      <a-modal
        title="操作"
        style="top: 20px"
        :width="1200"
        v-model="visible"
        @ok="handleOk"
        @cancel="form.resetFields()"
      >
        <a-spin :spinning="spinning">
          <a-form class="permission-form" :form="form">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="唯一识别码">
              <a-input placeholder="唯一识别码" disabled="disabled" v-decorator="['id']" />
            </a-form-item>
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="角色名称">
              <a-input placeholder="请填写角色名称" v-decorator="['name']" disabled />
            </a-form-item>
            <a-divider>拥有权限</a-divider>
            <div :style="{ height: '400px', overflow: 'auto', padding: '0 100px' }">
              <template v-for="permission in permissions">
                <div :key="permission.id">
                  <h3 style="font-weight:bold">
                    <a-checkbox @change="onMenuChange($event, permission)" :checked="permission.defaultChecked == 1">
                      <span :style="{ fontSize: '18px', color: '#333' }">{{ permission.name }}</span>
                    </a-checkbox>
                  </h3>
                  <div v-if="permission.second && permission.second.length > 0">
                    <div v-for="item in permission.second" :key="item.id" style="margin-left:25px">
                      <p style="margin-top:10px">
                        <a-checkbox
                          class="permission-group"
                          :labelCol="labelCol"
                          :wrapperCol="wrapperCol"
                          :style="{ marginBottom: '4px' }"
                          @change="onMenuChange($event, item)"
                          :checked="item.defaultChecked == 1"
                        >
                          <span :style="{ fontSize: '16px', fontWeight: 'bold', color: '#333' }">{{ item.name }}</span>
                        </a-checkbox>
                      </p>
                      <!-- <a-checkbox>全选</a-checkbox> -->
                      <a-checkbox-group
                        :options="item.third"
                        :value="item.checkedArr"
                        :style="{ marginLeft: '25px' }"
                        @change="onActionChange($event, item, permission)"
                      />
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </a-form>
        </a-spin>
      </a-modal>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import pick from 'lodash.pick'
import formTableMixin from '@/mixins/formTableMixin'
import { getPurviewList, purviewGet, purviewAdd } from '@/api/purview'

const columns = [
  {
    title: '角色名称',
    dataIndex: 'name'
  },
  {
    title: '权限',
    dataIndex: 'menu',
    scopedSlots: { customRender: 'menu' }
  },
  {
    title: '操作',
    width: '150px',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'PermissionList',
  mixins: [formTableMixin],
  data () {
    this.listAction = parameter => getPurviewList(parameter).then(res => {
        this.expandedRowKeys = res.data.data.map(item => item.id)
        return res
      })
    return {
      spinning: false,
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      form: this.$form.createForm(this),
      permissions: [],
      columns,
      expandedRowKeys: []
    }
  },
  methods: {
    async handleEdit (record) {
      this.visible = true
      this.spinning = true
      await purviewGet({ role_id: record.id }).then(res => {
        res.data.forEach(item => {
          if (item.second && item.second.length > 0) {
            item.second.forEach(acitons => {
              acitons.checkedArr = acitons.third
                .filter(action => action.defaultChecked === 1)
                .map(action => action.value)
            })
          }
        })
        this.permissions = res.data
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(record, ['id', 'name']))
          this.spinning = false
        })
      })
    },
    handleOk (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        const parmas = {
          role_id: values.id,
          menu: this.permissions
            .filter(firstMenu => firstMenu.defaultChecked === 1)
            .map(firstMenu => {
              return {
                id: firstMenu.id,
                name: firstMenu.name,
                second: firstMenu.second
                  .filter(secondMenu => secondMenu.defaultChecked === 1)
                  .map(secondMenu => {
                    return {
                      id: secondMenu.id,
                      name: secondMenu.name,
                      third: secondMenu.third
                        .filter(action => action.defaultChecked === 1)
                        .map(action => {
                          return {
                            label: action.label,
                            value: action.value
                          }
                        })
                    }
                  })
              }
            })
        }
        console.log(err, values)
        purviewAdd(parmas).then(res => {
          this.visible = false
          // 重置表单数据
          this.form.resetFields()
          // 刷新表格
          this.$refs.table.refresh()
          this.$message.success('操作成功')
        })
      })
    },
    onMenuChange (e, menu) {
      const checked = e.target.checked
      if (checked) {
        menu.defaultChecked = 1
      } else {
        menu.defaultChecked = 2
      }
    },
    onActionChange (e, secondMenu, firstMenu) {
      const { third: actionList } = secondMenu
      firstMenu.defaultChecked = 1
      secondMenu.defaultChecked = 1
      actionList.forEach(item => {
        if (e.includes(item.value)) {
          item.defaultChecked = 1
        } else {
          item.defaultChecked = 2
        }
      })
      secondMenu.checkedArr = e
    }
  }
}
</script>

<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
/deep/.ant-checkbox-wrapper {
  margin-bottom: 6px;
}
</style>
